<template>
  <view class="page">
    <view class="align-center justify-between">
      <view class="text_4">我的分类</view>
      <view class="edit" :class="{ sure: showEdit }" @click="editData">{{ showEdit ? '完成' : '编辑' }}</view>
    </view>
    <view class="box_12 flex-row flex-wrap">
      <view class="group_2" v-for="(item, index) in userList" :key="index">
        {{ item.name }}
        <uni-icons type="closeempty" size="15" style="margin-left: 15px" v-if="showEdit" @click="delUserList(index)"></uni-icons>
      </view>
      <view v-if="userList.length == 0" class="noneData"></view>
    </view>

    <view class="text-wrapper_9 flex-row justify-between">
      <text class="text_13">更多分类</text>
    </view>
    <view class="box_12 flex-row flex-wrap">
      <view class="group_2" v-for="(item, index) in cateList" :key="index">
        {{ item.name }}
        <uni-icons type="plusempty" size="15" style="margin-left: 15px" v-if="showEdit" @click="addUserList(index)"></uni-icons>
      </view>
      <view v-if="cateList.length == 0" class="noneData"></view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      cateList: [],
      userList: [],
      showEdit: false
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    delUserList(index) {
      this.cateList.push(this.userList[index]);
      this.userList.splice(index, 1);
    },
    addUserList(index) {
      this.userList.push(this.cateList[index]);
      this.cateList.splice(index, 1);
    },
    editData() {
      if (this.showEdit == true) {
        this.$http({
          url: 'editCategory',
          data: {
            category_list: this.userList.map((el) => el.id).join(',')
          }
        }).then((res) => {
          this.getList();
          this.showEdit = false;
        });
      } else {
        this.showEdit = true;
      }
    },
    getList() {
      this.$http({ url: 'getAllCategory' }).then((res) => {
        this.cateList = res.data;
      });
      this.$http({ url: 'getSelfCategory' }).then((res) => {
        this.userList = res.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import '../common/common.css';
.noneData {
  height: 90px;
  transform: scale(1.5);
}
.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 2.5%;
  box-sizing: border-box;
}

.text_4 {
  overflow-wrap: break-word;
  color: rgba(53, 56, 71, 1);
  font-size: 30rpx;
  text-align: left;
  white-space: nowrap;
  line-height: 46rpx;
  margin-top: 2rpx;
}

.text_5 {
  height: 30rpx;
  overflow-wrap: break-word;
  color: rgba(168, 168, 168, 1);
  font-size: 22rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
  margin: 7rpx 0 0 30rpx;
}

.text_6 {
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 28rpx;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 28rpx;
}

.box_12 {
  width: 100%;
  margin-top: 30px;
}

.text-wrapper_4 {
  background-color: rgba(255, 242, 243, 1);
  border-radius: 23px;
  padding: 32rpx 76rpx 32rpx 78rpx;
}

.text_7 {
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(254, 55, 60, 1);
  font-size: 28rpx;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 42rpx;
}

.thumbnail_3 {
  width: 32rpx;
  height: 32rpx;
}

.group_3 {
  background-color: rgba(250, 250, 250, 1);
  border-radius: 23px;
  width: 210rpx;
  padding: 28rpx 8rpx 32rpx 48rpx;
}

.text_9 {
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 28rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
  line-height: 42rpx;
  margin-top: 4rpx;
}

.thumbnail_4 {
  width: 32rpx;
  height: 32rpx;
}

.box_13 {
  width: 690rpx;
  margin-top: 28rpx;
}

.group_4 {
  background-color: rgba(250, 250, 250, 1);
  border-radius: 23px;
  width: 210rpx;
  padding: 30rpx 16rpx 30rpx 48rpx;
}

.text_10 {
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 28rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
  line-height: 42rpx;
  margin-top: 2rpx;
}

.thumbnail_5 {
  width: 32rpx;
  height: 32rpx;
}

.group_5 {
  background-color: rgba(250, 250, 250, 1);
  border-radius: 23px;
  width: 210rpx;
  padding: 32rpx 16rpx 28rpx 48rpx;
}

.text_11 {
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 28rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
  line-height: 42rpx;
}

.thumbnail_6 {
  width: 32rpx;
  height: 32rpx;
}

.group_6 {
  background-color: rgba(250, 250, 250, 1);
  border-radius: 23px;
  width: 210rpx;
  padding: 30rpx 8rpx 30rpx 48rpx;
}

.text_12 {
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 28rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
  line-height: 42rpx;
  margin-top: 2rpx;
}

.thumbnail_7 {
  width: 32rpx;
  height: 32rpx;
}

.text-wrapper_9 {
  width: 326rpx;
  margin: 60rpx 364rpx 0 0;
}

.text_13 {
  height: 30rpx;
  overflow-wrap: break-word;
  color: rgba(53, 56, 71, 1);
  font-size: 30rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 46rpx;
}

.text_14 {
  height: 30rpx;
  overflow-wrap: break-word;
  color: rgba(168, 168, 168, 1);
  font-size: 22rpx;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 32rpx;
}

.box_14 {
  width: 690rpx;
  margin-top: 62rpx;
}

.group_7 {
  background-color: rgba(250, 250, 250, 1);
  border-radius: 23px;
  width: 210rpx;
  padding: 32rpx 22rpx 32rpx 48rpx;
}

.text_15 {
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 28rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
  line-height: 28rpx;
}

.thumbnail_8 {
  width: 22rpx;
  height: 22rpx;
  margin: 4rpx 0 2rpx 0;
}

.group_8 {
  background-color: rgba(250, 250, 250, 1);
  border-radius: 23px;
  width: 210rpx;
  padding: 32rpx 22rpx 32rpx 48rpx;
}

.text_16 {
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 28rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
  line-height: 42rpx;
}

.thumbnail_9 {
  width: 22rpx;
  height: 22rpx;
  margin: 4rpx 0 2rpx 0;
}

.group_9 {
  background-color: rgba(250, 250, 250, 1);
  border-radius: 23px;
  width: 210rpx;
  padding: 32rpx 14rpx 32rpx 48rpx;
}

.text_17 {
  height: 28rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 28rpx;
  font-family: SourceHanSansCN-Regular;
  font-weight: NaN;
  text-align: center;
  white-space: nowrap;
  line-height: 42rpx;
}

.thumbnail_10 {
  width: 22rpx;
  height: 22rpx;
  margin: 4rpx 0 2rpx 0;
}

.group_2 {
  padding: 5px 5px;
  color: rgba(51, 51, 51, 1);
  font-size: 28rpx;
  margin: 5px 0;
  margin-right: 12px;
  width: 30%;
  height: 46px;
  background: #fafafa;
  border-radius: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.edit {
  width: 62px;
  height: 24px;
  border-radius: 12px;
  border: 1px solid #fe373c;

  font-weight: 400;
  font-size: 14px;
  color: #fe373c;
  line-height: 24px;
  text-align: center;
}
.sure {
  background: linear-gradient(331deg, #fe373c 0%, #fe7837 100%);
  box-shadow: 0px 2px 6px 0px rgba(255, 136, 139, 0.5);
  border-radius: 12px;
  font-size: 14px;
  color: #ffffff;
}
</style>
